<template>
	<view v-if="info" class="page page-pull" :style="{backgroundColor: info.color.bjs}">
		<!-- banner -->
		<view class="banner">
			<image class="image" mode="widthFix" :src="imgPath + info.image.banner"></image>
			<view class="time">活动时间：{{info.begintime}}-{{info.endtime}}</view>
		</view>
		<!-- 拉新进度 -->
		<view class="task" :style="{backgroundImage: 'url(' + imgPath + info.image.red + ')'}">
			<view class="common-title flex-row-center font14">{{info.tip}}</view>
			<image class="image" :src="imgPath + info.image.tip"></image>
			<view class="desc">邀请到指定人数再得奖励</view>
			<view class="steps flex-row-between flex-start">
				<block v-for="(item, index) in taskList" :key="index">
					<view class="item" :class="{' active': item.flag != 0}">
						<view class="text">{{item.flag != 0 ? '完成' : ('差' + (item.value - people) + '人')}}</view>
						<view class="line"><view class="circle"></view></view>
						<view class="goods flex-column-center">
							<image v-if="item.flag != 0" src="https://static.newbeaconhotels.com/app/hotel/activity/red2.png"></image>
							<image v-if="item.flag == 0" src="https://static.newbeaconhotels.com/app/hotel/activity/red3.png"></image>
							<view class="font10 font-666666 tc">{{item.name}}</view>
							<view v-if="item.flag == 1" class="get flex-row-center" @click="takePrize(item.id)">领取</view>
							<view v-if="item.flag == 2" class="get grey flex-row-center">已领</view>
						</view>
					</view>
				</block>
			</view>
			<!--  #ifdef  MP-WEIXIN -->
			<button v-if="info.flag != 0" class="btn" open-type="share" title="分享">立即邀请</button>
			<!--  #endif -->
			<!--  #ifdef  H5 -->
			<view v-if="info.flag != 0" class="btn" @click="Ongive">立即邀请</view>
			<!--  #endif -->
			
			<view v-if="info.flag == 0" class="btn" @click="dont">无权限邀请</view>
		</view>
		<!-- 活动说明 -->
		<view class="rule box-shadow">
			<view class="common-title flex-row-center font14">活动说明</view>
			<view class="content font12">
				<rich-text :nodes="info.info"></rich-text>
			</view>
		</view>
		<!-- 奖励列表 -->
		<view class="prize box-shadow">
			<view class="rope flex-row-between"></view>
			<view class="common-title flex-row-center font14">奖励列表</view>
			<view class="item flex-row-between">
				<view class="photo bg-cover" :style="{backgroundImage: 'url(' + userInfo.avatar + ')'}"></view>
				<view class="name font14">{{userInfo.name}}</view>
				<view class="need font13">成功邀请<text class="font-assist">{{people}}</text>人</view>
			</view>
			<block v-for="(item, index) in taskList" :key="index">
				<view class="item flex-row-between">
					<image v-if="item.flag != 0" class="image" src="https://static.newbeaconhotels.com/app/hotel/activity/red1.png"></image>
					<image v-if="item.flag == 0" class="image" src="https://static.newbeaconhotels.com/app/hotel/activity/red1-1.png"></image>
					<view class="name font14">{{item.name}}</view>
					<view v-if="item.flag == 0" class="btn grey">邀请{{item.value}}人解锁</view>
					<view v-if="item.flag == 1" class="btn" @click="takePrize(item.id)">立即领取</view>
					<view v-if="item.flag == 2" class="btn grey" >已领取</view>
				</view>
			</block>
			<view v-if="taskList.length <= 0" class="no_data">暂无数据~</view>
		</view>
		<!-- 拉新记录 -->
		<view class="record box-shadow">
			<view class="rope flex-row-between"></view>
			<view class="common-title flex-row-center font14">邀请拉新记录</view>
			<block v-for="(item, index) in dataList1" :key="index">
				<view class="item font13 flex-row-between">
					<view class="photo bg-cover" :style="{backgroundImage: 'url(' + item.avatar + ')'}"></view>
					<view class="name">{{item.name}}</view>
					<view class="font-666666">{{item.addtime}}</view>
				</view>
			</block>
			<view v-if="dataList1.length <= 0" class="no_data">暂无数据~</view>
		</view>
		<!-- 排行榜 -->
		<view class="topboard box-shadow">
			<view class="rope flex-row-between"></view>
			<view class="common-title flex-row-center font14">邀请拉新TOP5排行榜</view>
			<block v-for="(item, index) in dataList2" :key="index">
				<view class="item font13 flex-row-between">
					<view class="number font-666666">{{index+1}}</view>
					<view class="photo bg-cover" :style="{backgroundImage: 'url(' + item.avatar + ')'}"></view>
					<view class="name">{{item.name}}</view>
					<view class="font-666666">已拉新：<text class="font-assist">{{item.count}}</text>人</view>
				</view>
			</block>
			<view v-if="dataList2.length <= 0" class="no_data">暂无数据~</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgPath: this.$Config.http_static, // 图片头
				
				id: null, // 活动id
				info: null, // 活动信息
				// 用户信息
				userInfo: {
					name: '',
					avatar: ''
				},
				userType: 2, // 1员工，2会员
				idInfo: {},
				people: 0, // 已拉新的人数
				taskList: [], // 任务列表
				dataList1: [], // 拉新记录
				dataList2: [], // 排行榜
				// 分享参数
				share: {
					title: '',
					path: '',
					imageUrl: 'https://static.newbeaconhotels.com/app/hotel/temporary/pull-banner.png',
					type: true, // 是否采用其它路径
				},
				h5share: true, // 当前页面是否单独获取签名
				wxSdk: false, // H5签名是否成功（此页面用于分享）
			}
		},
		onLoad(options) {
			let $this = this
			
			// 从缓存中拿取各种id信息
			this.idInfo = uni.getStorageSync('idInfo')
			
			// #ifdef H5
			this.$wxapi.OnwxSdk().then(res => {
				this.wxSdk = res.code == 1 ? true : false
			})
			// #endif
			
			let params = {}
			params = options;
			if(this.$Route.query.data){
				params = this.$base.OnWxoptions(this.$Route.query.data)
			}
			if(this.$Route.query.scene){
				params = this.$base.OnWxoptions(this.$Route.query.scene)
			}
			
			this.id = params.id
		},
		onShow() {
			let $this = this;
			
			// 获取用户信息
			this.$Http({
				url: 'user',
				token: true
			}).then(res => {
				if (res.code == 1) {
					$this.userInfo = res.data.user
					
					// 活动详情
					$this.$Http({
						url: 'activityInfo',
						token: true,
						data: { id: $this.id },
					}).then(res1 => {
						if (res1.code == 1) {
							res1.data.begintime = $this.$base.formatTime(new Date(res1.data.begintime), "yyyy/MM/dd")
							res1.data.endtime = $this.$base.formatTime(new Date(res1.data.endtime), "yyyy/MM/dd")
							$this.info = res1.data
							
							// 分享数据
							let paramStr = 'Pid.' + this.idInfo.Pid + ',Fid.' + this.idInfo.Fid + ',Cid.' + res1.data.channel + ',id.' + res1.data.id
							$this.share.path = '/pages/activity/pullnew/index?scene=' + paramStr
							$this.share.title = '[' + (res.data.user.name ? res.data.user.name : '有人') + '@我]一起参加活动'
							
							// #ifdef H5
							if ($this.wxSdk) {
								$this.Onshare()
							}
							// #endif
							
							// 任务列表
							$this.getTask()
							
							// 拉新记录
							$this.getLower()
							
							// 排行榜
							$this.getTop()
						}
					});
				}
			});
		},
		methods: {
			// 任务列表
			getTask () {
				this.$Http({
					url: 'activityTask',
					token: true,
					data: {
						activity_id: this.info.id
					}
				}).then(res => {
					this.people = res.data.count
					this.taskList = res.data.data
				});
			},
			// 拉新记录
			getLower () {
				this.$Http({
					url: 'activitySource',
					token: true,
					data: {
						activity_id: this.info.id
					}
				}).then(res => {
					this.dataList1 = res.data
				});
			},
			// 排行榜
			getTop () {
				this.$Http({
					url: 'activityTop',
					token: true,
					data: {
						activity_id: this.info.id
					}
				}).then(res => {
					this.dataList2 = res.data
				});
			},
			// 立即领取
			takePrize (id) {
				this.$Http({
					url: 'takePrize',
					token: true,
					data: {
						id: id
					}
				}).then(res => {
					if (res.code == 1) {
						uni.showModal({
							title: '领取提示',
							confirmText: '确定',
							confirmColor: '#03004c',
							cancelText: '取消',
							content: '您现在要去领取吗？',
							success: function(res) {
								if (res.confirm) {
									uni.navigateTo({ url: '/pages/activity/common/prizeList' })
								}
							}
						});
					} else {
						uni.showToast({  title: res.msg, icon: 'none' });
					}
				});
			},
			//h5发送给好友
			Ongive(){
				uni.showModal({
					title: '分享提示',
					confirmText: '我知道了',
					confirmColor: '#03004c',
					showCancel: false,
					content: '请点击右上角三个点后,发送给好友',
					success: function(res) {
					}
				});
			},
			// 无权限邀请
			dont () {
				uni.showToast({
					title: '无权限邀请',
					icon: 'none'
				})
			}
		}
	}
</script>

<style lang="less">
	@import url("style.less");
</style>
